window.addEventListener('load', function () {
    //配置
    var config = {
        vx:2,	//小球x轴速度,正为右，负为左
        vy: 4,	//小球y轴速度
        height: 2,	//小球高宽，其实为正方形，所以不宜太大
        width: 2,
        count: 40,		//点个数
        color: "#E4E4E4", 	//点颜色
        stroke: "E4E4E4", 		//线条颜色
        dist: 6000, 	//点吸附距离
        e_dist: 20000, 	//鼠标吸附加速距离
        max_conn:8 	//点到点最大连接数
    }
    //调用
    CanvasParticle(config);
               // 换页时的js样式
               let changepages=document.querySelectorAll('header .nav li');
               // console.log( changepages.length);
               changepages.forEach(function(v,i){
                 v.addEventListener('mouseover',function(){
                   for (let j = 0; j < changepages.length; j++) {
                     changepages[j].classList.remove('active');
                   }
                   v.classList.add('active');
                 })
                 v.addEventListener('mouseout',function(){
                           v.classList.remove('active');
                           changepages[2].classList.add('active');
                       })
               })

    let testData = [
        { "times": 4000, "price": 1200, "unitPrice": "0.3000" },
        { "times": 8000, "price": 2000, "unitPrice": "0.2500" },
        { "times": 40000, "price": 8000, "unitPrice": "0.2000" }
    ]
    let lis = document.querySelector('#banner .test ul');
    let chang=document.querySelector("#change");
    let priceBox=document.querySelector("#priceBox");
    // priceBox.innerHTML=testData[0].unitPrice
    testData.forEach(function (v,i) {
        let liDom = document.createElement('li');
        if(i==0){
            liDom.classList.add('active')
        }else{
            liDom.classList.remove('active')
        }
        liDom.innerHTML = v.times + "/次"
        lis.appendChild(liDom);
    })

    let lisarr=document.querySelectorAll('#banner .test li'); 
    // console.log(chang);
    // lisarr[0].classList.add('active');
    lisarr.forEach(function(v,i){
    
        v.addEventListener('click',function(){
            for (let j = 0; j < lisarr.length; j++) {
                lisarr[j].classList.remove('active') 
            }
        v.classList.add('active');
        change.innerHTML=testData[i].price
        priceBox.innerHTML=testData[i].unitPrice
            })
    })
    $('#banner .one').hover(function () {
        $('#banner .two').stop().slideToggle("slow");
    })
// 获取元素
/* let check=document.querySelectorAll(".menu ul li");
let bigBox=document.querySelectorAll("#bigBox>div");
// console.log(check,bigBox);
check.forEach(function(v,i){
    v.addEventListener('click',function(){
        for (let j = 0; j < check.length; j++) {
            check[j].classList.remove('trend');
            bigBox[j].classList.remove('on');
        }
        v.classList.add('trend')
        bigBox[i].classList.add('on');
    })
})*/
table('.menu ul li','trend',"#bigBox>div",'on')
}) 